<template>
  <div class="app-container">
    <el-aside width="100%" class="m-aside">
      该页面需要专业人员操作!! <br/>

      1.页面路径填写错误将导致菜单不显示,后台首次进入页面将遍历权限类型为菜单的页面路径来组合菜单显示 <br>
      2.权限标示需唯一,用于控制是否显示页面上的按钮

    </el-aside>
    <el-button v-permission="'add-permission'"  class="filter-item" style="margin-bottom: 25px;" type="primary" icon="el-icon-edit" @click="handleCreateTop" >
      添加顶级
    </el-button>

    <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      v-loading="listLoading"
      border
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="权限名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="权限标示">
      </el-table-column>

      <el-table-column
        prop="path"
        label="页面路径">
      </el-table-column>

      <el-table-column align="center" width="80"
        prop="type_zh"
        label="权限类型">
      </el-table-column>

      <el-table-column label="操作" align="center" width="260" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button  type="primary" size="mini" @click="handleCreate(row)" v-permission="'add-permission'">
            添加子级
          </el-button>

          <el-button  type="primary" size="mini" @click="handleUpdate(row)" v-permission="'edit-permission'">
            编辑
          </el-button>

          <el-button  type="danger" size="mini" @click="handleModifyStatus(row)" v-permission="'delete-permission'">
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">

      <el-form ref="permissionForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="名称" prop="name">
          <el-input v-model="temp.name" />
        </el-form-item>

        <el-form-item label="标示" prop="remark">
          <el-input v-model="temp.remark" />
        </el-form-item>

        <el-form-item label="页面路径" prop="path">
          <el-input v-model="temp.path" />
        </el-form-item>

        <el-form-item label="类型">
          <el-radio-group v-model="temp.type">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>

  </div>

</template>

<style>
  .m-aside{
    margin-bottom: 20px;
    display: block;
    line-height: 32px;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    color: rgb(44, 62, 80);
    -webkit-font-smoothing: antialiased;
    background: rgb(238, 241, 246);
    padding: 8px 24px;
    border-radius: 2px;
  }
</style>
<script>
    import { permissionsList, createPermission, updatePermission, deletePermission } from '@/api/permissions'


    export default {
        data() {
            return {
                listLoading:false,
                rules: {
                    name: [{ required: true, message: '权限名称必填', trigger: 'blur' }],
                    remark: [{ required: true, message: '权限标示必填', trigger: 'blur' }],
                },
                textMap: {
                    update: '编辑',
                    create: '添加'
                },
                dialogFormVisible:false,
                dialogStatus:'create',
                temp : {
                    id: undefined,
                    name: '',
                    remark:'',
                    pid:0,
                    type:"1",
                    path:''
                },
                tableData1: [],

                listQuery:{
                    default_id:1
                }
            }
        },

        created() {
            this.getList()
        },
        methods: {
            handleModifyStatus(row) {

                this.$confirm('确定删除吗', 'Warning', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async() => {
                        await deletePermission({id:row.id})
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })

                        await this.getList();
                    })
            },
            handleUpdate(row) {
                this.temp = Object.assign({}, row) // copy obj
                this.temp.type = parseInt(this.temp.type);

                this.dialogStatus = 'update'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['permissionForm'].clearValidate()
                })
            },
            getList() {
                this.listLoading = true
                this.listQuery.default_id = 1;
                permissionsList(this.listQuery).then(response => {
                    this.tableData1 = response.data.items

                    setTimeout(() => {
                        this.listLoading = false
                    }, 0.5 * 1000)
                })
            },
            createData(){
                this.$refs['permissionForm'].validate((valid) => {
                    if (valid) {
                        this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
                        createPermission(this.temp).then(() => {
                            this.dialogFormVisible = false
                            this.$notify({
                                title: '',
                                message: '添加成功',
                                type: 'success',
                                duration: 2000
                            });

                            this.getList();
                        })
                    }
                })
            },
            updateData(){
                this.$refs['permissionForm'].validate((valid) => {
                    if (valid) {
                        const tempData = Object.assign({}, this.temp)

                        updatePermission(tempData).then(() => {

                            this.getList();

                            this.dialogFormVisible = false
                            this.$notify({
                                title: '',
                                message: '更新成功',
                                type: 'success',
                                duration: 2000
                            })
                        })


                    }
                })
            },
            resetTemp() {
                this.temp = {
                    id: undefined,
                    name: '',
                    remark:'',
                    pid:0,
                    type:1,
                }
            },

            handleCreateTop(){
                this.resetTemp();
                this.temp.pid = 1;

                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['permissionForm'].clearValidate()
                })
            },
            handleCreate(row) {
                this.resetTemp();
                this.temp.pid = row.id;

                this.dialogStatus = 'create'
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['permissionForm'].clearValidate()
                })
            },
            load(tree, treeNode, resolve) {
                this.listQuery.default_id = tree.id;

                permissionsList(this.listQuery).then(response => {

                    resolve(response.data.items);

                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)

                })
            }
        },
    }
</script>
